<template>
    <el-dialog
        :visible.sync="dialogState"
        width="710px"
        :close-on-click-modal="false"
        :before-close="dialogClose"
    >
        <div class="dialog-title" slot="title">查看数据</div>
        <div class="dialog-body">
            <div class="top">
                <div class="top-item">
                    <div class="top-item-text">
                        <div class="title">发放总量</div>
                        <h2>3000<span>张</span></h2>
                    </div>
                </div>
                <div class="top-item">
                    <div class="top-item-text">
                        <div class="title">已领取</div>
                        <h2>2019<span>张</span></h2>
                    </div>
                </div>
                <div class="top-item">
                    <div class="top-item-text">
                        <div class="title">已使用</div>
                        <h2>2000<span>张</span></h2>
                    </div>
                </div>
                <div class="top-item">
                    <div class="top-item-text">
                        <div class="title">已优惠金额</div>
                        <h2>519<span>元</span></h2>
                    </div>
                </div>
            </div>
            <div class="botton">
                <div class="search">
                    <el-form :inline="true" :model="form" class="demo-form-inline">
                        <el-form-item label="手机号/昵称">
                            <el-input v-model="form.user" placeholder="请输入" size="small"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" size="small">查询</el-button>
                            <el-button type="primary" size="small" plain>重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="datalist">
                    <el-table
                        :data="listData"
                        stripe
                        style="width:100%"
                        width="100%"
                        :highlight-current-row="false"
                        size="small"
                        :header-cell-style="{background:'#FAFAFA',color:'#666', fontSize:'13px', fontWeight:'normal'}"
                        height="300px"
                    >
                        <el-table-column prop="date" label="用户账号"></el-table-column>
                        <el-table-column prop="date" label="优惠券"></el-table-column>
                        <el-table-column prop="date" label="领取数量"></el-table-column>
                        <el-table-column prop="date" label="使用数量"></el-table-column>
                    </el-table>
                </div>
                <div class="list-paginate">
                    <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="form.current"
                        :page-size="form.size"
                        :total="100"
                        @current-change="changePage"
                    ></el-pagination>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script>
export default {
    data(){
        return {
            dialogState:false,
            form:{},
            listData:[],
        }
    },
    methods:{
        // 关闭回调
        dialogClose(){
            this.dialogState = false;
        },
        // 分页
        changePage(e){},
    }
}
</script>

<style lang="less" scoped>
.dialog-title{
    height:30px;
    border-bottom:1px solid #EEEEEE;
    font-size: 13px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
}
::v-deep(.el-dialog__body){
    padding:20px 30px;
    .dialog-body{
        .top{
            display: flex;
            flex-direction:row;
            justify-content:space-between;
            .top-item{
                width:120px;
                height:72px;
                background: #F0F2F5;
                border-radius: 8px;
                padding:15px;
                display:grid;
                align-items:center;
                justify-items:flex-start;
                .top-item-text{
                    display: grid;
                    width:100%;
                    h2{
                        margin:0px;
                        color:#333;
                        margin-top:10px;
                        span{
                            font-size:13px;
                            font-weight:normal;
                            margin-left:10px;
                        }
                    }
                }
            }
        }
        .botton{
            .search{
                display:grid;
                justify-items: flex-end;
            }
            .datalist{}
            .list-paginate{
                display:grid;
                justify-items:flex-end;
                margin-top:10px;
            }
        }
    }
}
</style>
